<template>
  <div class="line_wrap">
    <div class="line_name">
      <span>
        <img src="/img/station/icon_line3.png" alt />
      </span>
      <p class="name">
        <span>一号线{{'（'+$store.state.ncLineThree.length+'站）'}}</span>
      </p>
      <p class="station_link">
        <a>前往南昌一号线页面</a>
      </p>
    </div>
    <div class="line_info">
      <ul class="station_list" >
        <li v-for="(item, index) in $store.state.ncLineThree" :key="index">
          <a href="#">
            <span class="station_value">{{index+1}}</span>
            <span class="text">{{item}}</span>
          </a>
        </li>
      </ul>
      <div class="metro_icon">
        <div class="icon">
          <img src="/img/station/icon_ncmetro_three.png" alt />
        </div>
      </div>
      <div class="see_more" >
        <a href="#" @mousemove.self="bgcPlus" @mouseleave.self="bgcSub">查看更多</a>
      </div>
    </div>
    
  </div>
</template>

<script>
import store from "../../store";
export default {
  methods: {
    bgcPlus(e) {
      e.target.style.backgroundColor = "rgba(12,12,12,.16)";
    },
    bgcSub(e) {
      e.target.style.backgroundColor = "";
    }
  }
};
</script>

<style scoped>
.line_wrap {
  max-width: 1280px;
  padding: 0 68px;
  margin: 0 auto;
}
.line_name{
  margin-top: 15px;
}
.line_name > * {
  display: table-cell;
  font-size: 1rem;
  vertical-align: middle;
}
.line_name img {
  width: 70px;
  margin-right: 10px;
}
.name > span::after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  background: url("/img/station/icon_link_arrow_black.png") no-repeat center;
  background-size: 4px 8px;
  vertical-align: middle;
}
.station_link > a::after {
  content: "";
  display: inline-block;
  width: 23px;
  height: 10px;
  background: url("/img/station/icon_blank_gray.png") no-repeat center;
  background-size: contain;
}
.station_link > a:hover {
  text-decoration: underline;
}
.station_link > a {
  cursor: pointer;
}
.line_info {
  width: 100%;
  margin-top: 15px;
  padding-bottom: 50px; 
}
.station_list {
  display: flex;
  justify-content: space-around;
  background-image: url(/img/station/bg_route_hibiya.png);
  background-repeat: no-repeat;
  background-size: 100% 30px;
  background-position: center -6px;
}
.station_list a {
  text-align: center;
}
.station_value {
  display: inline-block;
  color: black;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(168, 41, 207);
  text-align: center;
  border-radius: 12px;
}
.text {
  position: relative;
  background: url(/img/station/icon_link_arrow_gray_down.png) no-repeat center
    top;
  background-size: 8px 4px;
  font-size: 1rem;
  display: block;
  width: 30px;
  margin: 4px auto 0;
  padding-top: 10px;
  text-align: center;
  line-height: 1em;
  letter-spacing: 0;
}
.text::after {
  content: "";
  display: inline-block;
  width: 23px;
  height: 10px;
  background: url("/img/station/icon_blank_gray.png") no-repeat center;
  background-size: contain;
}
.metro_icon {
  margin-top: 50px;
}
.icon {
  width: 350px;
  margin: 0 auto;
}
.icon > img {
  width: 350px;
}
.see_more {
  margin-top: 50px;
  text-align: center;
}
.see_more > a {
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #c2d0d5;
  text-align: center;
  height: 50px;
  font-size: 1rem;
  padding: 0 22px 0 37px;
  border-radius: 3px;
  transition: background-color .3s;
}
.see_more > a::before {
  content: "";
  display: block;
  width: 7px;
  height: 12px;
  background: url("/img/icon_arrow_blue.png") no-repeat;
  background-size: contain;
  margin-right: 5px;
}
.see_more > a::after {
  content: "";
  display: block;
  width: 12px;
  height: 10px;
  background: url("/img/station/icon_blank_gray.png") no-repeat;
  background-size: contain;
  margin-left: 5px;
}
</style>